/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  DatePickerIOS,
  TouchableOpacity
} from 'react-native';

var CustomActionSheet = require('react-native-custom-action-sheet'); 

class AwesomeProject extends Component {

  constructor(props) {
      super(props);
      this.state = {
          datePickerModalVisible: false,  //选择器显隐标记  
          chooseDate: new Date()  //选择的日期 
      };
  }


  showDatePicker () {  
    console.log(41);
    this.setState({datePickerModalVisible: !this.state.datePickerModalVisible});  
  }
  
  onDateChange (date) {  
    this.setState({chooseDate: date});  
  }

  render() {
     console.log(42,this.state);

     let datePickerModal = (this.state.datePickerModalVisible ?  
          <CustomActionSheet  
          modalVisible={this.state.datePickerModalVisible} 
          onCancel={()=>this.showDatePicker()}>
            <View style={styles.datePickerContainer}>  
                  <DatePickerIOS
                    date = {this.state.chooseDate}
                    mode = "date"
                    onChange={this.onDateChange.bind(this)}
                  />
            </View>  
          </CustomActionSheet>: null  
    );  


    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>



             <Text onPress={this.showDatePicker.bind(this)} > test DatePick </Text>
  

     
        {datePickerModal}
       


      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
   datePickerContainer: {  
    flex: 1,  
    borderRadius: 5,  
    justifyContent: 'center',  
    alignItems: 'center',  
    backgroundColor: 'white',  
    marginBottom: 10,  
  },  
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
